<template>
  <div class="test-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>模拟考试</span>
        </div>
      </template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="客观题" name="1">
          <el-row :gutter="20" v-if="isLoading">
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="item in 12"
              :key="item"
            >
              <el-skeleton
                :rows="4"
                style="width: 220px; height: 220px"
                animated
              />
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else>
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(item, index) in Test1"
              :key="index"
              ><test-item :Test="item"
            /></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="主观题" name="2">
          <el-row :gutter="20" v-if="isLoading">
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="item in 12"
              :key="item"
            >
              <el-skeleton
                :rows="4"
                style="width: 220px; height: 220px"
                animated
              />
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else>
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(item, index) in Test2"
              :key="index"
              ><test-item :Test="item"
            /></el-col> </el-row
        ></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import testItem from "@/components/test-item.vue";
import { getTestKRequest, getTestZRequest } from "@/service/answer";
export default {
  components: {
    testItem,
  },
  setup() {
    let isLoading = ref(true);
    const activeName = ref("1");
    const TestData = reactive({
      Test1: [],
      Test2: [],
    });
    onMounted(async () => {
      requestTest1();
    });

    const handleClick = (tab) => {
      tab.props.name === 1 ? requestTest1() : requestTest2();
    };
    // 请求客观题数据
    const requestTest1 = async () => {
      isLoading.value = true;
      const res1 = await getTestKRequest();
      TestData.Test1 = res1.data.Test1Data;
      isLoading.value = false;
    };
    // 请求主观题数据
    const requestTest2 = async () => {
      isLoading.value = true;
      const res2 = await getTestZRequest();
      TestData.Test2 = res2.data.Test2Data;
      isLoading.value = false;
    };
    return {
      activeName,
      handleClick,
      ...toRefs(TestData),
      isLoading,
    };
  },
};
</script>

<style lang="less" scoped>
.card-header {
  font-weight: 700;
}
</style>
